<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card v-loading="loading" class="tree-card">
        <!-- 用了一个行列布局 -->
        <tree-tools
          :node-data="company"
          :is-root="true"
          @add-depts="handleAddDepts"
        />

        <!-- 放置一个el-tree组件 -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <!-- 用了一个行列布局 -->
          <template #default="{ data }">
            <tree-tools
              :node-data="data"
              @del-depts="getDepartments"
              @add-depts="handleAddDepts"
              @edit-depts="handleEditDepts"
            />
          </template>
        </el-tree>

      </el-card>
    </div>
    <Add-dept
      ref="addDeptDialog"
      :show-dialog="showDialog"
      :depts-list="deptsList"
      :node-data="treeNode"
      @close-dialog="handleClose"
      @add-depts="getDepartments"
    />
  </div>
</template>

<script>
import { reqGetDepartments } from '@/api'
import { tranListToTreeData } from '@/utils/index'
import treeTools from './components/tree-tools.vue'
import AddDept from './components/add-dept' // 引入新增部门组件

export default {
  components: {
    treeTools,
    AddDept
  },
  data() {
    return {
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人'
      },
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      // 定义控制窗体显示的变量**`showDialog`**
      showDialog: false,
      // 存放子组件传进来的数据,当前点击的哪个数据
      treeNode: {},
      // 存储部门列表数据，用具传参，进行自定义校验
      deptsList: [],
      // 加载控制
      loading: false
    }
  },
  created() {
    // 获取页面数据
    this.getDepartments()
  },
  methods: {
    // 获取页面数据
    async getDepartments() {
      // 开启加载
      this.loading = true
      // 调用接口
      const { data } = await reqGetDepartments()
      // 对返回的参数进行赋值，调用utlis、index里封装的递归方法
      this.company.name = data.companyName || '传智播客'
      this.company.manager = data.companyManage || '负责人'
      // 根据接口，在添加部门时需要id，此时company没有，手动添加
      this.company.id = ''
      this.departs = tranListToTreeData(data.depts, '')
      // console.log(data)
      // 存储数据，用具传参，进行自定义校验
      this.deptsList = data.depts
      // 关闭加载
      this.loading = false
    },
    // 关闭弹窗
    handleClose() {
      this.showDialog = false
    },
    // 新增部门
    handleAddDepts(value) {
      // 控制弹窗打开
      this.showDialog = true
      // console.log(value)
      // 将子组件传进来的数据存一份
      this.treeNode = value
    },
    // 编辑部门
    handleEditDepts(value) {
      // 将子组件传进来的数据存一份
      this.treeNode = value
      // 打开弹窗
      this.showDialog = true
      // 调用子组件已经封装好的方法,去给表单中的数据
      this.$refs.addDeptDialog.getDepartDetail(this.treeNode.id)
    }
  }

}
</script>

<style lang="scss" scoped>
  .tree-card {
    padding: 30px 30px;
    font-size:14px;
  }
</style>
